<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/3d-force-graph"></script>
<!--  <script src="../../dist/3d-force-graph.js"></script>-->
</head>

<body>
  <div id="3d-graph"></div>

  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
  <script type="module">
    import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';

    const Graph = ForceGraph3D()
      (document.getElementById('3d-graph'))
        .backgroundColor('#000003')
        .jsonUrl('../datasets/miserables.json')
        .nodeLabel('id')
        .nodeAutoColorBy('group');

    const bloomPass = new UnrealBloomPass();
    bloomPass.strength = 4;
    bloomPass.radius = 1;
    bloomPass.threshold = 0;
    Graph.postProcessingComposer().addPass(bloomPass);
  </script>
</body>